<template>
	<div :class="'NavigationArea '+(bgColor=='red'?'bg_red':'bg_white')">
		<div class="navText">
			<div class="icon"></div>
			<div>
				<nav :class="'breadcrumb'+(bgColor=='red'?'_red':'_white')">
					<ol>
						<li v-for="(item, index) in items" :key="index" :class="{ active: index === items.length - 1 }">
							<router-link :to="item.to">{{ item.label }}</router-link>
							<span v-if="index !== items.length - 1" class="separator">></span>
						</li>
					</ol>
				</nav>
			</div>

		</div>
		<div class="menuArea">
			<div @click="goToPage(item.name)"
				:class="(bgColor=='red'?'menus_red ':'menus_white ')+((index+1==checked)?'active':'')"
				v-for="(item,index) in menus" :key="index" :style="isMobil?'width:'+itemWidth+'% !important;':''">
				{{item.name}}
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getStore,
		setStore,
		removeStore
	} from '../../../utils/tools.js';
	export default {
		name: 'Navigation',
		components: {

		},
		props: {
			checked: {
				type: Number,
				default: () => 1
			},

			navText: String,
			menus: Array,
			items: Array,
			bgColor: String
		},
		data() {
			return {
				isMobil: false,
				itemWidth: 20
			}
		},
		mounted() {
			if (window.innerWidth <= 768 && this.menus.length > 0) {
				this.isMobil = true;
				this.itemWidth = 100 / this.menus.length;
			} else {
				this.isMobil = false;
			}
			window.addEventListener('resize', this.handleWindowResize);
		},
		computed: {

		},
		methods: {
			handleWindowResize() {
				if (window.innerWidth <= 768 && this.menus.length > 0) {
					this.isMobil = true;
					this.itemWidth = 100 / this.menus.length;
				} else {
					this.isMobil = false;
				}
			},
			goToPage(name) {
				this.removeAllStore();
				this.$router.push({
					name: name
				});
			},
			//移除缓存
			removeAllStore() {
				//党建引领
				removeStore("partyListPage");
				//企业新闻
				removeStore("enterprisePage");
				removeStore("enterpriseAnnouncePage");
				//产品与服务
				removeStore("saleAnnouncePage");
				//可持续发展
				removeStore("environmentPage");
				//采购信息
				removeStore("bidPage");
				removeStore("imorrtantPage");
				removeStore("tenderPage");
				removeStore("failedBidPage");
				//企业荣誉
				removeStore("HonorPage");
				//党员活动
				removeStore("activitiesPage");
			},
		}
	}
</script>

<style lang="scss" scoped>
	.NavigationArea {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bg_red {
		background-color: #C80E0E;
	}

	.bg_white {
		background-color: #FFF;
	}

	.navText {
		flex: 1;
	}

	.breadcrumb_red li,
	.breadcrumb_white li {
		/* 样式设置 */
		float: left;
	}

	.breadcrumb_red li a {
		/* 样式设置 */
		color: #C7C7C7;
	}

	.breadcrumb_white li a {
		/* 样式设置 */
		color: #C7C7C7;
	}

	.breadcrumb li a {
		/* 样式设置 */
		color: #C7C7C7;
	}

	.breadcrumb_red .active a {
		/* 样式设置 */
		color: #FFF !important;
	}


	.breadcrumb_white .active a {
		/* 样式设置 */
		color: #0484D7 !important;
	}


	.separator {
		/* 样式设置 */
		margin: 0 5px;
		color: #C7C7C7;
	}

	.menuArea {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
	}

	.NavigationArea {
		height: 50px;
		width: 100%;
		margin: 0 auto;
		display: flex;
	}

	.navText {
		height: 50px;
		line-height: 50px;
		width: 50%;
		display: flex;
	}

	.menus_red {
		height: 50px;
		line-height: 50px;
		width: 100px;
		cursor: pointer;
		color: #C7C7C7;
		text-align: center;
	}

	.menus_red:hover {
		color: #FFF;
		font-size: 13px;
		background-color: #dd5858;
	}

	.menus_red.active {
		background-color: #FFF;
		color: #C80E0E;
	}

	.menus_red.active:hover {
		background-color: #f0f0f0;
	}

	.menus_white {
		height: 50px;
		line-height: 50px;
		min-width: 50px;
		padding: 0 10px;
		cursor: pointer;
		color: #777777;
		text-align: center;
		font-size: 16px;
		width: 100px;
	}

	.menus_white:hover {
		color: #333;
		// font-size: 15px;
		background-color: #f0f0f0;
	}

	.menus_white.active {
		background-color: #0484D7;
		color: #FFF;
	}

	.menus_white.active:hover {
		background-color: #409EFF;
		color: #FFF;
	}


	.icon {
		height: 20px;
		width: 20px;
		margin-top: 15px;
		background: url("../../../assets/icons/icon_position.png") no-repeat;
		background-position: center;
		background-size: 20px;
	}




	@media (min-width: 2560px) {

		.NavigationArea {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.NavigationArea {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {

		.NavigationArea {
			width: calc(2320px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.NavigationArea {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.NavigationArea {
			width: calc(1920px * 0.8);
		}
	}

	@media (max-width: 1720px) {


		.NavigationArea {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.NavigationArea {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.NavigationArea {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.NavigationArea {
			width: calc(1120px * 0.8);
		}
	}

	@media (max-width: 1024px) {
		.NavigationArea {
			width: 100%;
		}
	}

	@media (max-width: 900px) {
		.NavigationArea {
			width: 100%;
		}
	}


	@media (max-width: 768px) {
		.NavigationArea {
			width: 100% !important;
		}

		.navText {
			display: none;
		}

		.menus_white {
			padding: 0px;
			font-size: 14px;
			height: 50px;
			line-height: 50px;
		}
	}

	@media (max-width: 468px) {
		.NavigationArea {
			width: 100% !important;
		}

		.navText {
			display: none;
		}

		.menus_white {
			padding: 0px;
			font-size: 12px;
			height: 50px;
			line-height: 50px;
		}
	}
</style>
